<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Rap2迁移工具</title>
    <style>
      .fullPage{
        height: 100%;
        width: 100%;
        background-color:gray;
        left:0;
        opacity: 0.8;
        position: absolute;
        top: 0;
        z-index: 1000;
        filter: alpha(opacity=50);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2em;
        color:red;
      }
      .bs-example2:after{position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#959595;text-transform:uppercase;letter-spacing:1px;content:"日志"}
      .bs-example1:after{position:absolute;top:15px;left:15px;font-size:12px;font-weight:700;color:#959595;text-transform:uppercase;letter-spacing:1px;content:"迁移"}
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="./css/docs.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="/img/favicon.ico">
  </head>
  <body>
    <div class="container" id='app'>
      <div v-if="loading" class="fullPage">请等待，完成后蒙层会自动消失...</div>

      <div class="jumbotron" style="margin-top: 2em;">
        <h1>Rap2迁移到Yapi</h1>
        <p class="lead">轻而易举的把接口迁移到Yapi，更好的管理API文档。Yapi对前后端都支持的更友好些，关键这个迁移可以保证数据无损，<a href="./example.html" target="_blank" >示例</a>。</p>
        <p><a class="btn btn-lg btn-default" href="https://github.com/changzhiwin/yapi-plugin-import-rap2" target="_blank" role="button"><span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>点个赞</a></p>
      </div>

      <div class="row marketing">
        <div class="col-lg-7">
          <form class="bs-example bs-example-form bs-example1" data-example-id="simple-input-groups" style="height: 30em;">
            <label for="basic-url">Yapi项目的Token</label>
            <div class="input-group input-group-lg">
              <span class="input-group-addon" id="sizing-addon1">必须</span>
              <input type="text" v-model="token" class="form-control" placeholder="Token" aria-describedby="sizing-addon1">
            </div>
            <br>
            <label for="basic-url">Yapi项目的Projec ID</label>
            <div class="input-group input-group-lg">
              <span class="input-group-addon" id="sizing-addon1">必须</span>
              <input type="text" v-model="projectId" class="form-control" placeholder="Project ID" aria-describedby="sizing-addon1">
            </div>
            <br>
            <label for="basic-url">Rap2仓库的Repository ID</label>
            <div class="input-group input-group-lg">
              <span class="input-group-addon" id="sizing-addon1">必须</span>
              <input type="text" v-model="repositoryId" class="form-control" placeholder="Repository ID" aria-describedby="sizing-addon1">
              <span class="input-group-addon">
                路径有重复？<input type="checkbox" v-model="hasRepeat">
              </span>
            </div>
            <br>
            
            <div class="input-group">

              <button type="button" v-on:click="clear" class="btn btn-default btn-lg">
                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 清空
              </button>

              <button type="button" v-on:click="echo"  class="btn btn-default btn-lg" style="margin-left: 2em;">
                <span class="glyphicon glyphicon-sort" aria-hidden="true"></span> 回显参数
              </button>

              <button type="button" v-on:click="fetchRepository"  class="btn btn-default btn-lg" style="margin-left: 2em;">
                <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 查看rap仓库
              </button>

              <button type="button" v-on:click="submit"  class="btn btn-default btn-lg" style="margin-left: 2em;">
                <span class="glyphicon glyphicon-send" aria-hidden="true"></span> 执行
              </button>
            </div>
          </form>
        </div>

        <div class="col-lg-5">
          <div class="bs-docs-section">
            <div class="bs-example bs-example-form bs-example2" data-example-id="simple-input-groups" style="height: 30em;">
              <pre style="max-height: 28em;">{{logs}}</pre>
            </div>

          </div>
        </div>
      </div>

      
      <footer class="footer">
        <p>&copy; changzhiwin@gmail.com</p>
      </footer>


    </div> <!-- /container -->
  </body>
    
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        token: '',
        projectId: '',
        repositoryId: '',
        hasRepeat: false,
        logs: "",
        loading: false
      },
      methods: {
        clear: function (event) {
          this.token = ''
          this.projectId = ''
          this.repositoryId = ''
          this.logs = ""
          this.hasRepeat = false
        },

        fetchRepository: async function (event) {
          await this._sendRequest('/api/rap2/get_one_project_data')
        },

        echo: async function () {
          await this._sendRequest('/api/rap2/echo')
        },

        submit: async function (event) {
          await this._sendRequest('/api/rap2/importy-from-rap2')
        },

        _sendRequest: async function(path) {
          this.loading = true;
          let ret = await axios.get(path, {
            params: {
              token: this.token,
              projectId: this.projectId,
              repositoryId: this.repositoryId,
              randomPath: this.hasRepeat ? 'yes' : null
            }
          })

          this.logs = JSON.stringify(ret.data, 0, 4)
          this.loading = false;
        }
      }
    })
  </script>
</html>